<template>
  <div class="login-main" ref="login" :style="{height:height}">
    <div class="logo">weibo</div>
    <div class="main-box">
      <div class="login-menu">
        <el-menu
          :default-active="active"
          class="el-menu-demo"
          mode="horizontal"
          text-color="#000"
          @select="select"
          active-text-color="#ffa00a">
          <el-menu-item index="1">登录</el-menu-item>
          <el-menu-item index="3" disabled>|</el-menu-item>
          <el-menu-item index="2">注册</el-menu-item>
        </el-menu>
      </div>
      <div>
        <!-- <transition-group name="breadcrumb" tag="div"> -->
          <div :key="'login'" v-if="active == '1'" class="login">
            <el-form 
              ref="form" 
              :model="form" 
              label-width="80px" 
              size="medium">
              <el-form-item 
                label="账号"
                prop="username"
                :rules="[
                  {required:true,message:'账号不能为空'}
                ]">
                <el-input 
                  @keyup.enter.native="login()"
                  v-model="form.username" 
                  placeholder="请输入账号或者用户名"
                  ></el-input>
              </el-form-item>
              <el-form-item 
                label="密码"
                prop="password"
                :rules="[
                  {required:true,message:'密码不能为空'}
                ]">
                <el-input 
                  @keyup.enter.native="login()"
                  v-model="form.password" 
                  placeholder="请输入密码" 
                  show-password></el-input>
              </el-form-item>
              <el-form-item 
                label="验证码"
                prop="checkMsg"
                :rules="[
                  {required:true,message:'验证码不能为空'}
                ]">
                <el-input 
                  @keyup.enter.native="login()"
                  v-model="form.checkMsg" 
                  placeholder="请输入验证码"></el-input>
              </el-form-item>
              <el-form-item>
                <div>
                  <el-image
                    @click="load()"
                    style="width: 100px;height: 50px;" :src="msgCode"></el-image>
                  <span class="msg-change" @click="load()">看不清？换一张</span>
                </div>
              </el-form-item>
              <el-form-item size="large">
                <el-button type="primary" @click="login">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div :key="'register'" v-if="active == '2'" class="login">
            <el-form ref="form2" :model="form2" label-width="80px" size="medium">
              <el-form-item 
                label="用户名"
                prop="nickname"
                :rules="[
                  {required:true,message:'用户名不能为空'}
                ]">
                <el-input 
                  @keyup.enter.native="register()"
                  v-model="form2.nickname" 
                  placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item 
                label="密码"
                prop="password"
                :rules="[
                  {required:true,message:'密码不能为空'}
                ]">
                <el-input 
                  @keyup.enter.native="register()"
                  v-model="form2.password" 
                  placeholder="请输入密码" 
                  show-password></el-input>
              </el-form-item>
              <el-form-item 
                label="确认密码"
                prop="repassword"
                :rules="[
                  {required:true,message:'密码不能为空'}
                ]">
                <el-input 
                  @keyup.enter.native="register()"
                  v-model="form2.repassword" 
                  placeholder="请输入密码" 
                  show-password></el-input>
              </el-form-item>
              <el-form-item 
                label="出生日期"
                prop="birthday"
                :rules="[
                  {required:true,message:'出生日期不能为空'}
                ]">
                <el-date-picker 
                  v-model="form2.birthday" 
                  @change="selectDate" 
                  placeholder="请选择日期"></el-date-picker>
              </el-form-item>
              <el-form-item 
                label="验证码"
                prop="checkMsg"
                :rules="[
                  {required:true,message:'验证码不能为空'}
                ]">
                <el-input 
                  @keyup.enter.native="register()"
                  v-model="form2.checkMsg" 
                  placeholder="请输入验证码"></el-input>
              </el-form-item>
              <el-form-item>
                <div>
                  <el-image
                    style="width: 100px;height: 50px;" :src="msgCode" @click="load"></el-image>
                  <span class="msg-change" @click="load">看不起？换一张</span>
                </div>
              </el-form-item>
              <el-form-item size="large">
                <el-button type="primary" @click="register">立即注册</el-button>
              </el-form-item>
            </el-form>
          </div>
        <!-- </transition-group> -->
      </div>
    </div>
    <div style="width: 900px;margin: 0 auto;">
      <foot></foot>
    </div>
  </div>
</template>

<script>
  import globalApi from '@/api/globalApi'
  import foot from '@/components/commonFoot'
  export default {
    data () {
      return {
        active:'1',
        height:'1080px',
        form: {
          username:'',
          password:'',
          checkMsg:''
        },
        form2 : {
          nickname:'',
          password:'',
          repassword:'',
          checkMsg:'',
          birthday:''
        },
        msgCode:'',
        aa:''
      }
    },
    components:{
      foot
    },
    created() {
      this.load()
      this.setHeight();
    },
    mounted() {
    },
    computed:{
      
    },
    methods: {
      load() {
        var that = this;
        globalApi.getCheckMsg().then(res => {
          // console.log(res);
          if(res.success) {
            var data = res.data;
            if(data.status == '1') {
              that.msgCode = data.data;
            }else {
              that.$message.error(data.msg);
            }
          }
        })
      },
      setHeight() {
        console.log(window.innerHeight)
        this.height = window.innerHeight + 'px';
      },
      select(e) {
        this.active = e;
        this.load();
      },
      login() {
        var that = this;
        this.$refs['form'].validate((valid) => {
          if(valid) {
            globalApi.login(that.form).then(res => {
              if(res.success) {
                var _data = res.data;
                if(_data.status == '1') {
                  that.userInfo.setIsLogin();
                  localStorage.setItem("token",_data.token);
                  that.$router.push({
                    path:'/wb',
                    query:{
                      p:1,
                      type:1
                    }
                  })
                  
                }else {
                  that.$message.warning(_data.msg);
                }
                that.load();
              }
            })
          } else {
            console.log('error');
          }
        })
      },
      register() {
        var that = this;
        this.$refs['form2'].validate((valid) => {
          if(valid) {
            globalApi.register(that.form2).then(res => {
              if(res.success) {
                var _data = res.data;
                if(_data.status == '1') {
                  that.$message.success("注册成功");
                  that.active = '1';
                }else {
                  that.$message.warning(_data.msg);
                }
                that.load();
              }
            })
          } else {
            console.log('error');
          }
        })
      },
      selectDate(e) {
        this.form2.birthday = e;
      }
    }
  }
</script>

<style scoped="scoped">
  .login-main {
    background-color: #bee1f5;
  }
  .logo {
    text-align: center;
    font-size: 46px;
    width: 900px;
    height: 184px;
    line-height: 184px;
    background: url(../assets/logo.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
    font-style: italic;
  }
  .main-box {
    width: 900px;
    height: 536px;
    margin: 0 auto;
    border-radius: 6px;
    background-color: white;
    overflow: hidden;
    
  }
  .login-menu {
    padding-left: 20px;
  }
  .login-menu .el-menu--horizontal>.el-menu-item {
    font-size: 22px!important;
  }
  .login {
    width: 300px;
    margin: 0 auto;
    margin-top: 30px;
  }
  .check-msg {
    position: absolute;
    right: 100px;
    /* top: -100px; */
  }
  .msg-change {
    position: relative;
    top: -5px;
    left: 5px;
    cursor: pointer;
  }
</style>
